<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .Container {
        width: 450px;
        height: 287px;
        border: 1px solid #000;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
      }
      .imgContainer {
        width: 2300px;
        height: 287px;
        position: absolute;
        left: 0px;
      }
      .imgContainer img {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="Container">
      <div class="imgContainer">
        <img src="img/10.jpg" alt="" />
        <img src="img/20.jpg" alt="" />
        <img src="img/21.jpg" alt="" />
        <img src="img/32.jpg" alt="" />
        <img src="img/9.jpg" alt="" />
      </div>
    </div>
  </body>
</html>
<script>
  var imgContainerEle = document.querySelector(".imgContainer");
  // document.onclick = function(){
  //     move(imgContainerEle,"left",-520,function(){
  //         console.log("运动完成");
  //     })
  // }
  var page = 1;
  setInterval(function () {
    move(imgContainerEle, "left", -450 * page, function () {
      page++;
      console.log(page);
      if (page == 5) {
        page = 1;
        imgContainerEle.style.left = "0px";
      }
    });
  }, 2000);

  function move(boxEle, dir, dis, cb) {
    function fn() {
      var num = parseInt(getComputedStyle(boxEle)[dir]);
      var res = dis > num ? 1 : -1;
      var speed = 10 * res;
      boxEle.style[dir] = num + speed + "px";
      if (num + speed == dis) {
        // Math.abs( (num +speed)-dis)<5;
        cb && cb();
      } else {
        window.requestAnimationFrame(fn);
      }
    }
    fn();
  }
</script>
